<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/test.css">
    <title>Document</title>
</head>

<body>
    <div class="container-fluid">
        <div class="row">

            <div class="selector clearfix">
                <div class="column col-md-12 col-sm-12 col-xs-12 menue ">
                    <ul class="breadcrumb">
                        <li class="dropdown">
                            <a type="button" class="btn dropdown-toggle" id="left"
                                    data-toggle="dropdown">
                                左侧
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <input id="left111" type="checkbox" value="left111" name="left"/> <label>left111</label>
                                </li>
                                <li>
                                    <input id="left222" type="checkbox" value="left222"  name="left"/> <label>left222</label>
                                </li>
                                <li>
                                    <input id="left333" type="checkbox" value="left333" name="left"/> <label>left333</label>
                                </li>
                                <li>
                                    <input id="left444" type="checkbox" value="left444" name="middle"/> <label>left444</label>
                                </li>
                                <li>
                                    <input id="left555" type="checkbox" value="left555"  name="middle"/> <label>left555</label>
                                </li>
                                <li>
                                    <input id="left666" type="checkbox" value="left666" name="middle"/> <label>left666</label>
                                </li>
                                <li>
                                    <a href="#">分离的链接</a>
                                </li>
                                
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a type="button" class="btn dropdown-toggle" id="middle"
                                    data-toggle="dropdown">
                                中间
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <input id="middle111" type="checkbox" value="middle111" name="middle"/> <label>middle111</label>
                                </li>
                                <li>
                                    <input id="middle222" type="checkbox" value="middle222"  name="middle"/> <label>middle222</label>
                                </li>
                                <li>
                                    <input id="middle333" type="checkbox" value="middle333" name="middle"/> <label>middle333</label>
                                </li>
                                <li>
                                    <input id="middle444" type="checkbox" value="middle444" name="middle"/> <label>middle444</label>
                                </li>
                                <li>
                                    <input id="middle555" type="checkbox" value="middle555"  name="middle"/> <label>middle555</label>
                                </li>
                                <li>
                                    <input id="middle666" type="checkbox" value="middle666" name="middle"/> <label>middle666</label>
                                </li>
                                <li>
                                    <a href="#">数据通信/网络</a>
                                </li>
                                
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a type="button" class="btn dropdown-toggle" id="middle"
                                    data-toggle="dropdown">
                                右侧
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <input id="right111" type="checkbox" value="right111" name="middle"/> <label>right111</label>
                                </li>
                                <li>
                                    <input id="right222" type="checkbox" value="right222"  name="middle"/> <label>right222</label>
                                </li>
                                <li>
                                    <input id="right333" type="checkbox" value="right333" name="middle"/> <label>right333</label>
                                </li>
                                <li>
                                    <input id="right444" type="checkbox" value="right444" name="middle"/> <label>right444</label>
                                </li>
                                <li>
                                    <input id="right555" type="checkbox" value="right555"  name="middle"/> <label>right555</label>
                                </li>
                                <li>
                                    <input id="right666" type="checkbox" value="right666" name="middle"/> <label>right666</label>
                                </li>
                                <li>
                                    <a href="#">分离的链接</a>
                                </li>
                                
                            </ul>
                        </li>
                        
                        <li><a href="#" type="button">2013</a></li>
                        <li><button class="btn btn-sm btn-primary" onclick="showSelectedChart()">确认选择</button></li>
                        <li><button class="btn btn-sm btn-info" onclick="showAllChart()">显示全部</button></li>
                    </ul>
                </div>
            </div>

            <div class="allchartWarp">

                    <div id="left111C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="leftchart">leftchart1</div>
                    </div>
                    <div id="left222C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="leftchart">leftchart2</div>
                    </div>
                    <div id="left333C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="leftchart">leftchart3</div>
                    </div>
                    <div id="left444C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="leftchart">leftchart4</div>
                    </div>
                    <div id="left555C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="leftchart">leftchart5</div>
                    </div>
                    <div id="left666C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="leftchart">leftchart6</div>
                    </div>

                    <div id="middle111C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="middlechart">middlechart1</div>
                    </div>
                    <div id="middle222C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="middlechart">middlechart2</div>
                    </div>
                    <div id="middle333C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="middlechart">middlechart3</div>
                    </div>
                    <div id="middle444C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="middlechart">middlechart4</div>
                    </div>
                    <div id="middle555C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="middlechart">middlechart5</div>
                    </div>
                    <div id="middle666C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="middlechart">middlechart6</div>
                    </div>

                    <div id="right111C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="rightchart">rightchart1</div>
                    </div>
                    <div id="right222C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="rightchart">rightchart2</div>
                    </div>
                    <div id="right333C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="rightchart">rightchart3</div>
                    </div>
                    <div id="right444C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="rightchart">rightchart4</div>
                    </div>
                    <div id="right555C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="rightchart">rightchart5</div>
                    </div>
                    <div id="right666C" class="chartWarp col-md-4">
                        <h3>leftchart1的标题</h3>
                        <div class="rightchart">rightchart6</div>
                    </div>
            </div>

        </div>
    </div>


    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    <!-- 以下是echart用的 -->
    <script type="text/javascript" src="../js/flexible.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/vue.min.js"></script>
    <script type="text/javascript" src="js/test.js"></script>
    <!-- <script type="text/javascript" src="js/contentJS/myMap.js"></script> -->
</body>
</html>